import { Graph } from '@antv/x6';
// 注册制冷站的模型列表
export let frozenStationMeters = ['waterTower', 'hostMach', 'waterPump', 'waterCollector', 'waterDispatcher', 'coldMeter', 'valve'];

export let edgeAttrs = [
    { text:'颜色', key:'stroke', controlType:'color' },
    { text:'宽度', key:'strokeWidth', controlType:'slider', minValue:1, maxValue:20 },
    { text:'箭头样式', key:'name', parentKey:'targetMarker', controlType:'select', options:[{ label:'默认', value:'block' }, { label:'经典', value:'classic'}, { label:'菱形', value:'diamond' }, { label:'交叉', value:'cross'}] },
    { text:'箭头宽度', key:'width', parentKey:'targetMarker', controlType:'slider', minValue:10, maxValue:30  },
    { text:'箭头高度', key:'height', parentKey:'targetMarker', controlType:'slider', minValue:10, maxValue:30 },
    { text:'虚线长度', key:'0', parentKey:'strokeDasharray', controlType:'slider', minValue:0, maxValue:50 },
    { text:'虚线间隔', key:'1', parentKey:'strokeDasharray', controlType:'slider', minValue:0, maxValue:50 },
    { text:'开启动效', key:'style', controlType:'checkBox', defaultValue:{ animation:'ant-line 30s infinite linear' }}
];

export function showPorts(ports, show){
    for(let i=0, len=ports.length; i < len ; i++){
        ports[i].style.visibility = show ? 'visible' : 'hidden';
    }
}
export let edgeBtnMarkup = {
    args:{
        markup:[
            {
                tagName:'circle',
                selector:'button',
                attrs:{
                    r:12,
                    stroke:'#2195d1',
                    strokeWidth:2,
                    fill:'white',
                    cursor:'pointer'
                }
            },
            {
                tagName:'text',
                textContent:'设置',
                selector:'icon',
                attrs:{
                    fill:'#000',
                    fontSize:10,
                    textAnchor:'middle',
                    pointerEvents:'none',
                    y:'0.3em'
                }
            }
        ],
        distance:20
    }
}
export let ports = {
    groups:{
        top:{
            position:'top',
            attrs:{
                circle: {
                    r: 5,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                      visibility: 'hidden',
                    }
                },
            }
        },
        right:{
            position:'right',
            attrs:{
                circle: {
                    r: 5,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                      visibility: 'hidden',
                    }
                },
            }
        },
        bottom:{
            position:'bottom',
            attrs:{
                circle: {
                    r: 5,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                      visibility: 'hidden',
                    }
                },
            }
        },
        left:{
            position:'left',
            attrs:{
                circle: {
                    r: 5,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                      visibility: 'hidden',
                    }
                },
            }
        }
    },
    items:[
        { group:'top' },
        { group:'right'},
        { group:'bottom'},
        { group:'left' }
    ]
}
// 计算节点的连接桩的vertices
function calcPoint(direc, pos, size){
    let anchorX, anchorY, calcX, calcY;
    if ( direc === 'top' ) {
        calcX = anchorX = pos.x + Number(size.width)/2;
        anchorY = pos.y;
        calcY = pos.y - 40;
    } else if ( direc === 'right') {
        anchorX = pos.x + Number(size.width);
        calcX =  anchorX + 40;
        calcY = anchorY = pos.y + Number(size.height)/2;
    } else if ( direc === 'bottom') {
        calcX = anchorX = pos.x + Number(size.width)/2;
        anchorY = pos.y + Number(size.height);
        calcY =  anchorY + 40;
    } else if ( direc === 'left') {
        anchorX = pos.x;
        calcX = anchorX - 40;
        calcY = anchorY = pos.y + Number(size.height)/2;
    }
    return { anchorX, anchorY, calcX, calcY };
}
export function calcVertices(graph, edge){
    // 起始节点信息
    let sourceCell = edge.getSourceCell();
    let sourcePortId = edge.getSourcePortId();
    let sourcePort = sourceCell.getPort(sourcePortId);
    let sourcePos = sourceCell.position();
    let sourceSize = sourceCell.size();
    // 终止节点信息
    let targetCell = edge.getTargetCell();
    let targetPortId = edge.getTargetPortId();
    let targetPort = targetCell.getPort(targetPortId);
    let targetPos = targetCell.position();
    let targetSize = targetCell.size();
    // 起始节点的约束点
    let startPoint = calcPoint(sourcePort.group, sourcePos, sourceSize);
    // 终止节点的约束点
    let endPoint = calcPoint(targetPort.group, targetPos, targetSize);
    // 当起始节点的连接桩和终止节点连接桩的间距过小时，不添加约束点
    return  Math.abs(startPoint.anchorX - endPoint.anchorX ) > 40 ? [{ x:startPoint.calcX, y:startPoint.calcY }, { x:endPoint.calcX, y:endPoint.calcY }] : [];
}
// 注册一个自定义节点类型
Graph.registerNode(
    'anchor-node',
    {
        width:50,
        height:50,
        markup:[
            { tagName:'rect', selector:'body' },
            { tagName:'image', selector:'thumb'}
        ],
        attrs:{
            body:{
                refWidth:'100%',
                refHeight:'100%',
                rx:16,
                ry:16,
                fill:'#ccc'
            },
            thumb:{
                refX:0.1,
                refY:0.1,
                width:40,
                height:40
            }
        }
    },
    true
)
// 注册一个信息浮窗节点类型
Graph.registerNode(
    'info-node',
    {
        width:240,
        height:120,
        markup:[
            { tagName:'rect', selector:'header'},
            { tagName:'text', selector:'text1'},
            { tagName:'text', selector:'text2'},
            { tagName:'rect', selector:'symbolRect' },
            { tagName:'text', selector:'symbolLabel'},
            { tagName:'rect', selector:'content'},
            { tagName:'text', selector:'text3'},
            { tagName:'text', selector:'text4'},
            { tagName:'rect', selector:'progressOuter'},
            { tagName:'rect', selector:'progressInner'}
        ],
        zIndex:20,
        attrs:{
            header:{
                refWidth:'100%',
                refHeight:'50%',
                fill:'#165dff'
            },
            text1:{
                fill:'#fff',
                fontSize:14,
                refX:10,
                refY:10
            },
            text2:{
                fill:'#99b7fb',
                fontSize:12,
                refX:10,
                refY:40
            },
            symbolRect:{
                refX:0.8,
                refY:10,
                fill:'#64de64',
                width:36,
                height:20
            },
            symbolLabel:{
                fontSize:12,
                fill:'#fff',
                refX:0.92,
                textAnchor:'end',
                refY:14
            },  
            content:{
                refWidth:'100%',
                refHeight:'50%',
                refX:0,
                refY:'50%',
                fill:'#fff'
            },
            text3:{
                refX:10,
                refY:80
            },
            text4:{
                refX:0.9,
                refY:80,
                fontSize:16,
                fontWeight:800,
                textAnchor:'end'
            },
            progressOuter:{
                refX:10,
                refY:100,
                width:220,
                height:8,
                fill:'#ededed'
            },
            progressInner:{
                refX:10,
                refY:100,
                width:220,
                height:8,
                fill:{
                    type:'linearGradient',
                    stops:[{ offset:'0%', color:'#00a1fe' }, { offset:'100%', color:'#3570f0'}]
                }
            }
        }
    }
)

export function createInfoNode(){

}
